<template>
	<view class="index_recommend" v-if="reBanner">
		<scroll-view style="height:100vh" scroll-y="true" @scrolltolower="lower">
			<!-- 轮播图 swiper 自定义指示点 dot-->
			<view class="swiper_box">
				<!-- <uni-swiper-dot :current="current"  :mode="mode" :dotsStyles="dotsStyles"> -->
				<swiper class="swiper_list" @change="currentNum" :circular="true" :autoplay="true" :interval="3000">
					<swiper-item class="swiper_item" v-for="item,index in reBanner" :key="index">
						<image class="img" :src="`${item.i}`"></image>
					</swiper-item>
				</swiper>
				<!-- </uni-swiper-dot> -->
				<!-- 自定义指示点 -->
				<view class="dots">
					<view class="dots_item" :class="index == current?'dots_item_active':''"
						v-for="item,index in reBanner" :key="index">
					</view>
				</view>
			</view>
			<!-- 内容组件 -->
			<compShared :compData="reList"></compShared>
			<!-- loading -->
			<compLoad :state="status"></compLoad>
			<!-- <view id="footer" class="footer"></view> -->
		</scroll-view>
	</view>
</template>

<script>
	import compLoad from '../compLoad/compLoad.vue'
	import compShared from '../compShared/compShared.vue';
	export default {
		name: "indexRecommend",
		data() {
			return {
				offset: 0, //分页
				current: 0, //指示点索引
				status: true,
				// page: 0,
				reBanner: null,
				reList: null,
				scrollTop: 0,
				old: {
					scrollTop: 0,
				}

			};
		},
		components: {
			compShared,
			compLoad
		},
		created() {
			// console.log( document.querySelector('.index_recommend'))

			this.getData(this.offset)


		},
		mounted() {
			// let io = new IntersectionObserver();
			// console.log(io)
			// // let viewList = document.getElementById('footer');
		},


		methods: {
			// scroll(e) {
			// 	// console.log(e)
			// 	this.old.scrollTop = e.detail.scrollTop
			// },
			// upper() {
			// 	console.log("滚动到顶部/左边触发")
			// 	// 滚动到顶部/左边触发
			// },
			lower() {
				console.log("滚动到底部/右边触发")
				// 滚动到底部/右边触发
				let tempIndex = ++this.offset;
				console.log('this.page ++', tempIndex);
				this.getData(tempIndex)
			},
			getData(k) {
				this.status = true;
				this.$axios({
					methods: 'get',
					url: `home/recommended/${k}/10`
				}).then(res => {
					this.$nextTick(() => {
						console.log('组件---->', res.result)
						if (k == 0) {
							this.reBanner = res.result.banner;
							this.reList = res.result.list;
							this.status = false;
						} else {
							this.reBanner = res.result.banner;
							this.reList = this.reList.concat(res.result.list);
							this.status = false;
						}
					})
				})
			},
			currentNum(e) {
				this.current = e.detail.current;
				// console.log(this.current)
			},
			// no 
			touchList(k) {
				console.log(k)
				// if (this.status == false) {
				k = k[0];
				let isShow = k.isIntersecting;
				if (isShow) {
					let tempIndex = ++this.offset;
					console.log('this.page ++', tempIndex);
					this.getData(tempIndex)
				}
				// }

			}
		}
	}
</script>

<style lang="scss">
	.index_recommend {
		width: 100%;
		margin-top: 178rpx;
		// z-index: -1;
	}

	.swiper_box {
		width: 100%;
		height: 240rpx;
		position: relative;

		.swiper_list {
			width: 100%;
			height: 100%;

			.swiper_item {
				width: 100%;
				height: 100%;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 自定义指示点
		.dots {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 50%;
			height: 30rpx;
			// background: rgba(0,0,0,.5);
			display: flex;
			justify-content: space-around;
			align-items: center;
			overflow: hidden;

			.dots_item {
				width: 26rpx;
				height: 10rpx;
				border-radius: 10rpx;
				background: rgba(0, 0, 0, .5);
			}

			.dots_item_active {
				background: #FFFFFF;
				animation: masked .6s linear;
			}
		}
	}

	// .shared_content {
	// 	width: 100%;
	// 	// margin-top: 200rpx;

	// 	// top 
	// 	.con_top {
	// 		width: 92%;
	// 		margin: 0 auto;
	// 		display: flex;
	// 		// justify-content: ;
	// 		align-items: center;
	// 		padding: 20rpx 0;

	// 		.img {
	// 			width: 70rpx;
	// 			height: 70rpx;
	// 			border-radius: 50%;
	// 		}

	// 		.top_txt {
	// 			font-size: 20rpx;
	// 			text-indent: 20rpx;
	// 			font-weight: 600;
	// 		}
	// 	}

	// 	// 大图
	// 	.img_2 {
	// 		width: 100%;
	// 		img {
	// 			width: 100%;
	// 			// height: 480rpx;
	// 		}
	// 	}

	// 	//收藏
	// 	.con_collect {
	// 		width: 92%;
	// 		margin: 0 auto;
	// 		display: flex;
	// 		justify-content: space-between;
	// 		align-items: center;
	// 		padding: 20rpx 0;

	// 		// 列表项 图
	// 		.collect_img {
	// 			display: flex;
	// 			// justify-content: space-between;
	// 			align-items: center;

	// 			.collect_img_item {
	// 				width: 38rpx;
	// 				height: 38rpx;
	// 				border-radius: 50%;
	// 			}
	// 		}

	// 		// num
	// 		.collect_num {
	// 			width: 60%;
	// 			font-size: 20rpx;
	// 		}

	// 		.collect_icon {}
	// 	}

	// 	// 标题 con_bottom
	// 	.con_bottom {
	// 		width: 92%;
	// 		margin: 0 auto;
	// 		padding: 20rpx 0;
	// 	}
	// }

	// css 动画

	@keyframes masked {
		0% {
			transform: translate(0px, 0px);
		}

		25% {
			transform: translate(5rpx, 0px);
		}

		75% {
			transform: translate(-10rpx, 0px);
		}

		100% {
			transform: translate(0px, 0px);
		}
	}
</style>
